<template>
    <a-form auto-label-width size="mini" layout="vertical">
        <a-form-item :label="customTranslate('Retry Time Cycle')">
            <a-input v-model="failedJobRetryTimeCycle"></a-input>
        </a-form-item>
        <a-form-item :label="customTranslate('Job Priority')">
            <a-input v-model="jobPriority"></a-input>
        </a-form-item>
    </a-form>
</template>

<script>
import { inject, toRaw } from "vue";
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'JobExecution',
    props: ["element"],
    data() {
        return {
            jobPriority: "",
            failedJobRetryTimeCycle: "",
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        return {
            bpmnModeler,
            customTranslate
        };
    },
    mounted() {
        console.log(this.element);
        this.jobPriority = this.element?.businessObject?.jobPriority;
        this.failedJobRetryTimeCycle = this.element?.businessObject?.extensionElements?.values?.filter(v=>{return v.$type == 'flowable:FailedJobRetryTimeCycle'}).map(v=>v.body);
    },
    watch: {
        jobPriority: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    "flowable:jobPriority": newVal,
                });
            }
        },
        failedJobRetryTimeCycle: {
            immediate: false,
            handler:
            function(newVal) {
                let extensionElements = this.element.businessObject.get('extensionElements')
                if (!extensionElements) {
                    extensionElements = this.bpmnModeler.get('moddle').create('bpmn:ExtensionElements')
                }

                extensionElements.values = extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:FailedJobRetryTimeCycle') || []

                if (newVal) {
                    const ele = this.bpmnModeler.get('moddle').create('flowable:FailedJobRetryTimeCycle')
                    ele.body = newVal
                    extensionElements.get('values').push(ele);

                    const modeling = toRaw(this.bpmnModeler.get("modeling"));
                    modeling.updateProperties(toRaw(this.element), { extensionElements });
                } else {
                    if (extensionElements.values?.length == 0) {
                        delete this.element.businessObject.extensionElements;
                    }
                }
            },
        }
    },
}
</script>

<style lang="scss" scoped>

</style>